<template>
    <!--地图挂载dom-->
    <div id="map">
    </div>
</template>

<script>
    //引入依赖

    import Map from 'ol/Map';
    import View from 'ol/View';
    import Feature from 'ol/Feature';
    import GeoJSON from 'ol/format/GeoJSON';
    import {Circle as CircleStyle, Fill, Stroke, Style, Text, Image, Icon, IconImage} from 'ol/style';
    import {Vector as VectorSource} from 'ol/source';
    import {Vector as VectorLayer} from 'ol/layer';
    import {Point, MultiPolygon} from 'ol/geom';
    import GeometryType from 'ol/geom/GeometryType';
    import icon from './image/icon.png'

    export default {
        name: 'VectorFileLayer',
        data() {
            return {}
        },
        mounted() {

            const image = new CircleStyle({
                radius: 5,
                fill: null,
                stroke: new Stroke({
                    color: 'red',
                    width: 1
                }),
            });

            const styles = {
                'Point': new Style({
                    image: image,
                }),
                'LineString': new Style({
                    stroke: new Stroke({
                        color: 'green',
                        width: 1,
                    }),
                }),
                'MultiLineString': new Style({
                    stroke: new Stroke({
                        color: 'green',
                        width: 1,
                    }),
                }),
                'MultiPoint': new Style({
                    image: image,
                }),
                'MultiPolygon': new Style({
                    stroke: new Stroke({
                        color: 'yellow',
                        width: 1,
                    }),
                    fill: new Fill({
                        color: '#fff',
                    }),
                }),
                'Polygon': new Style({
                    stroke: new Stroke({
                        color: 'red',
                        lineDash: [4],
                        width: 3,
                    }),
                    fill: new Fill({
                        color: 'rgba(0, 0, 255, 0.1)',//color可以采用rgba的形式也可以使用16进制的形式，还可以使用颜色表示的英文字符串，例如blue
                    }),
                }),
                'GeometryCollection': new Style({
                    stroke: new Stroke({
                        color: 'magenta',
                        width: 2,
                    }),
                    fill: new Fill({
                        color: 'magenta',
                    }),
                    image: new CircleStyle({
                        radius: 10,
                        fill: null,
                        stroke: new Stroke({
                            color: 'magenta',
                        }),
                    }),
                }),
                'Circle': new Style({
                    stroke: new Stroke({
                        color: 'red',
                        width: 2,
                    }),
                    fill: new Fill({
                        color: 'rgba(255,0,0,0.2)',
                    }),
                }),
            };

            const styleFunction = function (feature) {
                return styles[feature.getGeometry().getType()];
            };
            const vectorSource = new VectorSource({
                url: 'http://localhost:8888/openlayer/geojson/china.json',
                format: new GeoJSON(),
            });
            let vectorLayer = new VectorLayer({
                source: vectorSource,
                style: styleFunction,
            })
            this.map = new Map({
                layers: [vectorLayer],
                target: 'map',
                view: new View({
                    center: [116.38916015624999, 39.926588421909436],
                    projection: "EPSG:4326", //指定投影
                    zoom: 4,
                }),
            });
        },
        methods: {}
    }
</script>

<style scoped>
    #map {
        width: 100%;
        height: 100%;
    }
</style>
